<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
        login
    </title>
    <script src="../login/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="../login/js/jquery-ui.min.js" type="text/javascript"></script>
    <link type="text/css" href="../login/css/jquery-ui.min.css" rel="stylesheet">
    <link href="../login/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="../login/js/bootstrap.min.js" type="text/javascript"></script>
    <link type="text/css" href="../login/css/login.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

    <style>
        #center{
            margin: 200px auto;
        }
        .logo {
            height: 85px;
            width: 180px;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 85px;
            margin-left: 30px;
            float: left;
            font-weight: 700;
        }
    </style>

    <script language="JavaScript" type="text/javascript">
        function checkUserName() {    //验证用户名
            var fname = document.myform.username.value;
            var reg = /^[0-9a-zA-Z]/;
            if (fname.length != 0) {
                for (i = 0; i < fname.length; i++) {
                    if (!reg.test(fname)) {
                        alert("只能输入字母或数字");
                        return false;
                    }
                }
                if (fname.length < 4 || fname.length > 16) {
                    alert("只能输入4-16个字符");
                    return false;
                }
            }
            else {
                alert("请输入用户名");
                document.myform.username.focus();
                return false;
            }
            return true;
        }

        function passCheck() { //验证密码
            var userpass = document.myform.password.value;
            if (userpass == "") {
                alert("未输入密码 \n" + "请输入密码");
                document.myform.password.focus();
                return false;
            }
            if (userpass.length < 6 || userpass.length > 12) {
                alert("密码必须在 6-12 个字符。\n");
                return false;
            }
            return true;
        }

        function passCheck2() {
            var p1 = document.myform.password.value;
            var p2 = document.myform.password2.value;
            if (p1 != p2) {
                alert("确认密码与密码输入不一致");
                return false;
            } else {
                return true;
            }
        }

        function checkEmail() {
            var Email = document.getElementById("email").value;
            var e = Email.indexOf("@" && ".");
            if (Email.length != 0) {
                if (e > 0) {
                    if (Email.charAt(0) == "@" && ".") {
                        alert("符号@和符号.不能再邮件地址第一位");
                        return false;
                    }
                    else {
                        return true;
                    }
                }
                else {
                    alert("电子邮件格式不正确\n" + "必须包含@符号和.符号！");
                    return false;
                }
            }
            else {
                alert("请输入电子邮件！");
                return false;
            }
        }

        function checkbirthday() {    //验证用户名
            var year = document.myform.birthday.value;
            if (year < 1949 || year > 2007) {
                alert("年份范围从1949-2007年");
                return false;
            }
            return true;
        }


        // function validateform() {
        //     if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday())
        //         return true;
        //     else
        //         return false;
        // }

        function clearText() {
            document.myform.user.value = "";
            document.myform.password.value = "";
        }

        //显示隐藏对应的switchPwd()方法:
        $(function () {
            // 通过jqurey修改

            if($.cookie("password")!=null){
                $("#username").val($.cookie("username"))
                $("#password").val($.cookie("password"))
            }

            $("#passwordeye").click(function () {
                let type = $("#password").attr('type')
                if (type === "password") {
                    $("#password").attr("type", "text");
                } else {
                    $("#password").attr("type", "password");
                }
            });
        });
    </script>
</head>
<body>
<img src="../login/img/login_bg.jpg" class="bg">
<!--<div id="head">-->
<!--    <img src="../login/img/login_head.png" width="100%" height="auto">-->
<!--</div>-->
<div class="logo">安心保险</div>
<div id="center">
<!--    <form name="myform" onsubmit="return validateform( )"  id="myform">-->
    <form name="myform"   id="myform">
        <div class="input-group">
            <h3>
                用户名：
            </h3>
            &nbsp;
            <input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字，4-16个字符" autocomplete="off">
        </div>
        <div class="input-group">
            <h3>
                密&nbsp;&nbsp;&nbsp;码：
            </h3>
            &nbsp;
            <input class="form-control" id="password" name="password" type="password" style="height:40px" value="" placeholder="密码长度6-12位" autocomplete="off">
            <span class="input-group-btn"><input class="btn btn-default" id="passwordeye" type="button" value="show/hide"></span>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-md-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="auto">记住密码
                    </label>
                </div>
            </div>
        </div>
        <div id=" btn">
            <input class="btn btn-primary" name="loginButton" type="button" id="login" value="登录">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="register.html"><input class="btn btn-primary" name="registerButton" id="register" type="button" value="注册"></a>

        </div>
    </form>
</div>

<script type="text/javascript">
    let checked=0;
    $("#auto").click(function () {
        if($(this).prop("checked")==true){
            checked=1;
        }else {
            checked=0;
        }

    })
    $("#login").click(function () {

if(!checkUserName()){
    return;
}





        $.ajax({
            url:"/user/login?checked="+checked,
            data:$("#myform").serialize(),
            type:"post",
            dataType:"json",
            success:function (result) {
                if(result.state==2000){
                    $.cookie("username",result.data.username,{"expires":7})
                    $.cookie("password",result.data.password,{"expires":7})
                   // alert("登录成功")
                    location.href="index.html?name="+result.data.username
                }else{
                    alert(result.message)
                }
            }
        })
    })
</script>
</body>
</html>